<template>
  <div style="display: flex; flex-wrap: wrap">
    <div
      v-for="(items, index) in getQueryData()"
      :key="index"
      style="display: flex; padding-bottom: 3px"
    >
      <div
        v-html="items['label']"
        :style="setQueryLabelWidth(items)"
        :class="doJustify() ? 'query-label-h' : 'query-label'"
        v-if="queryLabel && items['label']"
      ></div>
      <el-date-picker
        :clearable="items['clearable']"
        :style="setQueryInputWidth(items)"
        v-if="items['date'] === true"
        v-model="items.val"
        type="date"
        :placeholder="items.remark"
        value-format="yyyy-MM-dd"
        :picker-options="items['dateOptions'] ? items['dateOptions'] : {}"
        @change="items['change'] ? items['change'](items) : get_data_list()"
        v-bind="items['attrs']"
      >
      </el-date-picker>
      <el-date-picker
        v-else-if="items['daterange'] !== undefined"
        :style="setQueryInputWidth(items)"
        :clearable="items['clearable']"
        value-format="yyyy-MM-dd"
        v-model="items.vals"
        type="daterange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="
          items['dateOptions'] ? items['dateOptions'] : dateOptions
        "
        @change="items['change'] ? items['change'](items) : get_data_list()"
        v-bind="items['attrs']"
      >
      </el-date-picker>
      <el-select
        :clearable="items['clearable']"
        :allow-create="items['allowCreate'] === true"
        :style="setQueryInputWidth(items)"
        v-else-if="items['dicts'] !== undefined"
        v-model="items.val"
        :placeholder="items.remark"
        :filterable="true"
        :remote-method="
          (words) =>
            items.query(words, (data) => {
              $set(items, 'dicts', data);
            })
        "
        :remote="items['query'] ? true : false"
        @focus="handleDictFocus(items)"
        @clear="get_data_list()"
        @change="
          items['change']
            ? items['change'](
                items,
                items['dicts'].filter((a) => a.value == items.val),
                queryInfo
              )
            : get_data_list()
        "
      >
        <el-option
          v-for="li in items['dicts']"
          :key="li.value + Math.random().toString()"
          :label="li.label"
          :value="li.value"
        >
          <slot :name="'query-' + items.key + '-dict'" :info="li">
            {{ li.label }}
          </slot>
        </el-option>
      </el-select>
      <el-autocomplete
        :style="setQueryInputWidth(items)"
        v-else-if="items['autocomplete'] === true"
        v-model="items.val"
        :fetch-suggestions="items['fetch_suggestions']"
        :trigger-on-focus="items['triggerOnFocus'] === true"
        :popper-append-to-body="items['popperAppendToBody'] === true"
        :popper-class="items['popperClass']"
        @select="
          (a) => {
            items['auto_select'] ? items['auto_select'](a, items) : undefined;
          }
        "
        :value-key="items['valueKey']"
        :select-when-unmatched="true"
        :placeholder="items.remark"
        @change="items['change'] ? items['change'](items) : get_data_list()"
      >
        <slot
          :name="'query-' + items.key + '-autocomplete'"
          slot-scope="{ item }"
          :info="item"
        >
          {{ item[items["valueKey"] ? items["valueKey"] : "value"] }}
        </slot>
      </el-autocomplete>
      <div
        v-else-if="items['customize'] === true"
        :style="setQueryInputWidth(items)"
      >
        <slot :name="`query-${items.key}-customize`" :info="items">
          query-items.key-customize
        </slot>
      </div>
      <el-input
        v-else
        @input="
          items['input'] ? items['input'](items['val'], queryInfo) : undefined
        "
        :style="setQueryInputWidth(items)"
        :maxlength="items.max ? items.max : 15"
        v-model="items.val"
        :placeholder="items.remark"
        @keyup.native.13="get_data_list()"
        :clearable="items['clearable']"
        @clear="get_data_list()"
        v-bind="items['attrs']"
      ></el-input>
    </div>
    <slot name="more"></slot>
    <slot name="query"></slot>
  </div>
</template>

<script>
import { dateOptions } from "./comm";
import { objectFilter } from "./tools";

export default {
  props: {
    queryInfo: { type: Object, default: () => {} },
    moreState: { type: Function, default: () => true },
    //是否显示查询label
    queryLabel: { Boolean, default: true }, //查询label宽度
    queryLabelWidth: {
      type: Function,
      default: (a) => {
        if (a.globlSetting?.queryLabelWidth) {
          return a.globlSetting.queryLabelWidth(a);
        } else {
          return 0;
        }
      },
    }, //查询lable分散对齐
    justify: {
      type: Function,
      default: (a) => {
        if (a?.globlSetting?.queryLabelJustify) {
          return a?.globlSetting?.queryLabelJustify();
        } else {
          return false;
        }
      },
    },
    //查询输入框宽度
    queryInputWidth: {
      type: Function,
      default: (a) => {
        if (a.globlSetting?.queryInputWidth) {
          return a.globlSetting.queryInputWidth(a);
        } else {
          return 0;
        }
      },
    },
  },
  data() {
    return {
      dateOptions: dateOptions,
    };
  },
  methods: {
    getQueryData() {
      return objectFilter(
        this.queryInfo,
        (a) => this.moreState(a.more) && a.inVisible !== true
      );
    },
    //设置查询label宽度
    setQueryLabelWidth(items) {
      if (this.queryLabelWidth(this)) {
        if (items["labelWidth"]) {
          return `width:${items["labelWidth"]}px`;
        } else {
          return `width:${this.queryLabelWidth(this)}px`;
        }
      } else {
        return `width:${items["labelWidth"]}px`;
      }
    },
    //设置查询输入框宽度
    setQueryInputWidth(items) {
      if (this.queryInputWidth(this)) {
        if (items.width) {
          return `width:${items.width}px`;
        } else {
          return `width:${this.queryInputWidth(this)}px`;
        }
      } else {
        if (items.width) {
          return `width:${items.width}px`;
        } else {
          return `width:150px`;
        }
      }
    },

    //分散对齐
    doJustify() {
      return this.justify(this);
    },
    get_data_list() {
      this.$emit("refersh");
    },
    handleDictFocus(items) {
      if (items["query"]) {
        items.query("", (data) => {
          this.$set(items, "dicts", data);
        });
      }
    },
  },
};
</script>


<style scoped>
.maincon {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100% !important;
}

.funs {
  display: flex;
  align-items: center;
  margin: 10px;
}

.tabcon {
  display: flex;
  width: 100%;
  overflow: auto;
}

.gpage {
  display: flex;
  height: 40px;
  justify-content: center;
  align-items: center;
}

.more {
  border: 1px solid #d9d9d9;
  background: #f2f2f2;
  border-radius: 5px;
  min-height: 40px;
  display: flex;
  flex: 1;
  max-height: 200px;
  overflow: auto;
  padding: 20px;
  margin: 10px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.query-label {
  display: inline-flex;
  height: 100%;
  align-items: center;
  margin-right: 3px;
  width: 100px;
  justify-content: flex-end;
  font-size: 12px;
  height: 36px;
  font-weight: normal;
}

.query-label-h {
  display: inline-block;
  margin-right: 3px;
  width: 100px;
  font-size: 12px;
  text-align-last: justify !important;
  height: 36px;
  line-height: 36px;
  font-weight: normal;
}

.el-table__cell .el-input__prefix div,
.el-table__cell .el-input__suffix div {
  display: inline-flex;
  align-items: center;
  height: 36px;
}
</style>

<style>
.el-form-item__error {
  position: relative !important;
}

.query-top {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

.query-btns {
  height: 100%;
}
</style>